<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎您: {{ name }}</div>
    <div>
      <el-divider content-position="left">课程</el-divider>
      <el-row :gutter="30">
        <el-col :span="4" v-for="(item, index) in listDatas" :key="index">
          <el-card :body-style="{ padding: '10px' }" shadow="hover">
            <a @click="clickTo(item)">
              <el-image
                style="width: 100%; height: 200px"
                v-if="item.courseCoverPath"
                :src="get_img_src(item.courseCoverPath)"
                fit="cover"
              />
              <el-image
                style="width: 100%; height: 200px"
                v-else
                src="@/assets/image/goods_default.png"
                fit="cover"
              />
            </a>
            <div style="padding: 4px;">
              <span>{{ item.courseName }}</span>
              <div class="bottom clearfix">
                <el-row>
                  <el-col :span="12">年级：{{ item.courseGradeName }}</el-col>
                  <el-col :span="12">学科：{{ item.courseSubjectName }}</el-col>
                  <el-col :span="12">版本：{{ item.courseVersionName }}</el-col>
                  <el-col :span="12">册别：{{ item.courseVolumeName }}</el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div v-if="user.userInfo.roleid == 7">
      <el-divider content-position="left">购买课程</el-divider>
      <el-row :gutter="30">
        <el-col :span="4" v-for="(item, index) in listBuyDatas" :key="index">
          <el-card :body-style="{ padding: '10px' }" shadow="hover">
            <a @click="clickTo(item)">
              <el-image
                style="width: 100%; height: 200px"
                v-if="item.courseCoverPath"
                :src="get_img_src(item.courseCoverPath)"
                fit="cover"
              />
              <el-image
                style="width: 100%; height: 200px"
                v-else
                src="@/assets/image/goods_default.png"
                fit="cover"
              />
            </a>
            <div style="padding: 4px;">
              <span>{{ item.courseName }}</span>
              <div class="bottom clearfix">
                <el-row>
                  <el-col :span="12">年级：{{ item.courseGradeName }}</el-col>
                  <el-col :span="12">学科：{{ item.courseSubjectName }}</el-col>
                  <el-col :span="12">版本：{{ item.courseVersionName }}</el-col>
                  <el-col :span="12">册别：{{ item.courseVolumeName }}</el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { mapState } from "vuex";
import { schoolCourseLsit } from "@/api/course/course";
import { get_img_src } from "@/utils/index.js";
import { pageCourseLsit } from "@/api/manage/teacher.js";
export default {
  computed: {
    ...mapState({
      user: state => state.user
    }),
    ...mapGetters([
      "name", // 遍历获取用户名称
      "nameIsShow" // 首页是否显示欢迎语
    ])
  },
  data() {
    return {
      listParam: {
        // 轮播查询条件
        sign: "2", // 课程查询标记： 1:本校；2:公开；3可购买；4已购买
        learningPhaseId: null, // 学段ID
        courseGradeId: null, // 年级ID
        courseSubjectId: null, // 学科ID
        courseVersionId: null, // /版本ID
        courseVolumeId: null, // 册别ID
        page: 1, // 第几页
        size: 6 // 每页查询记录条数
      },
      listDatas: [],
      listBuyDatas: []
    };
  },
  created() {
    this.getHotCourseLsit();
  },
  mounted() {
    // 首次挂载完后显示欢迎语
    if (this.nameIsShow && this.name) {
      this.$message({
        showClose: false,
        message: "欢迎您:" + this.name,
        type: "success",
        center: true
      });
      this.$store.commit("user/SET_NAMEISSHOW", false);
    }
  },
  methods: {
    // 调转到相应课程详情
    clickTo(item) {
      if (this.user.userInfo.roleid == 8) {
        this.$router.push({
          path: "/courseware/detail",
          query: {
            courseId: item.courseId,
            title: item.courseName
          }
        });
      } else {
        if ((this.listParam.sign = 3)) {
          this.$router.push({
            path: "/goods/detail",
            query: {
              courseId: item.courseId
            }
          });
        } else {
          this.$router.push({
            path: "/prepare/step1",
            query: {
              courseId: item.courseId,
              title: item.courseName
            }
          });
        }
      }
    },
    /** 获取文件路径 */
    get_img_src(val) {
      return get_img_src(val);
    },
    getHotCourseLsit() {
      this.loadObj = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.loadBuyObj = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      if (this.user.userInfo.roleid == 7) {
        this.listParam.sign = 2;
        schoolCourseLsit(this.listParam).then(response => {
          this.listDatas = response.data;
        });
        this.listParam.sign = 3;
        schoolCourseLsit(this.listParam).then(response => {
          this.listBuyDatas = response.data;
          this.loadBuyObj.close();
        });
        console.log(this.listBuyDatas)
      } else {
        this.listParam.sign = 1;
        this.listParam.size = 12;
        pageCourseLsit(this.listParam).then(response => {
          this.listDatas = response.data;
          this.loadObj.close();
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  text-align: center;
}

.dashboard-text {
  margin-bottom: 50px;
}

.el-carousel__item h5 {
  color: #9098a3;
  font-size: 14px;
  opacity: 0.75;
  line-height: 100px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #2c3c52;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
